/*字体*/
$i: 10;
@while ($i<=100) {
  .fs#{$i} {
    font-size: #{$i+'px'};
  }
  $i: $i+1;
}

/*width相对*/
$i: 1;
@while ($i<=100) {
  .width#{$i} {
    width: #{$i+'%'};
  }
  $i: $i+1;
}

/*line-height*/
$i: 10;
@while ($i<=20) {
  .lh#{$i} {
    line-height: #{$i*10+'%'};
  }
  $i: $i+1;
}

/*内外边距*/
$i: 5;
@while ($i<=375) {
  @each $t, $t1 in (m:margin, p:padding) {
    @each $p, $p1 in (t:top, r:right, b:bottom, l:left) {
      .#{$t}#{$p}#{$i} {
        #{$t1}-#{$p1}: #{$i+'px'};
      }
    }
  }
  $i: $i+1;
}

/*定位0*/
@each $p, $p1 in (t:top, r:right, b:bottom, l:left) {
  .#{$p+'0'} {
    #{$p1}: 0;
  }
}

/*border*/
@each $p, $p1 in (t:top, r:right, b:bottom, l:left) {
  .b#{$p} {
    border-#{$p1}: 1px solid #ebeef5;
  }
}

/*color*/
$i: 111;
@while ($i<=999) {
  .color_#{""+$i} {
    color: #{'#'+$i};
  }
  .bg_#{""+$i} {
    background-color: #{'#'+$i};
  }
  $i: $i + 111 ;
}

/*color*/
@each $i in a, b, c, d, e, f {
  .color_#{$i}#{$i}#{$i} {
    color: #{'#'}#{$i}#{$i}#{$i};
  }
  .bg_#{$i}#{$i}#{$i} {
    background-color: #{'#'}#{$i}#{$i}#{$i};
  }
}

/*color*/
@each $i in orange, red, green {
  .color_#{""+$i} {
    color: $i;
  }
  .bg_#{""+$i} {
    background-color: $i;
  }
}

/*display*/
@each $i in flex {
  .#{$i} {
    display: $i;
  }
}


/*flex*/
@each $i in 0, 1 {
  .flex#{$i} {
    flex: $i $i auto;
  }
}

/*flex-direction: column row*/
@each $i in column, row {
  .#{$i} {
    flex-direction: $i;
  }
}

/*flex
 * justify-content: flex-end space-between space-around*/
@each $i in flex-end, space-between, space-around, flex-center {
  .#{$i} {
    justify-content: $i;
  }
}

/*position: fixed, absolute, relative*/
@each $i in fixed, absolute, relative {
  .#{$i} {
    position: $i;
  }
}

.aic {
  align-items: center;
}

.jcc {
  justify-content: center;
}

.jce {
  justify-content: flex-end;
}
.jcb{
  justify-content: space-between;
}
.jca{
  justify-content: space-around;
}


.mask {
  background-color: rgba(0, 0, 0, .5);
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.pointer {
  cursor: pointer;
}

.oh {
  overflow: hidden;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

.tal {
  text-align: left;
}

.tar {
  text-align: right;
}

.bold {
  font-weight: bold;
}

.ellipsis {
  overflow: hidden; /*内容超出宽度时隐藏超出部分的内容 */
  text-overflow: ellipsis; /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
  white-space: nowrap; /*不换行 */
}

.overflow-y-auto, .overflow-x-auto {
  -webkit-overflow-scrolling: touch;
}

/*overflow*/
@each $j in hidden, auto {
  .overflow-#{$j} {
    overflow: $j;
  }
  @each $i in x, y {
    .overflow-#{$i}-#{$j} {
      overflow-#{$i}: $j;
    }
  }
}

/*字体加粗*/
.overstriking{
  font-weight:600;
}

/*radius*/
$i: 2;
@while ($i<=50) {
  .radius#{$i} {
    @if ($i==50) {
      border-radius: #{$i+'%'}
    } @else {
      border-radius: #{$i}px;
    }
  }
  $i: $i + 1;
}

/*对齐方式*/
@each $i in left, right, center {
  .#{$i} {
    text-align: $i;
  }
}

/** flex-wrap: wrap | wrap-reverse;
 */
@each $i in wrap, wrap-reverse{
  .#{$i} {
    flex-wrap: $i;
  }
}




* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body,
#app,
.wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
}


body {
  font-family: 'PingFang SC', "Helvetica Neue", Helvetica, "microsoft yahei", arial, STHeiTi, sans-serif;
}

a {
  text-decoration: none
}

li {
  list-style: none;
}

h3, h4 {
  font-weight: normal;
}